<script src="../../../permission.js"></script>
<template>
  <div class="way-container">
    <div class="title">渠道来源</div>
    <div class="chart-container">
      <vue-echarts :option="getOptions()"></vue-echarts>
    </div>
    <div class="bottom-container">
      <div class="item">
        <div class="item-key">
          <div class="iconfont icon-dian-copy-copy"></div>
          <div class="name">链接</div>
        </div>

        <div class="item-value">
          <div class="count">{{ config.false }}</div>
          <div class="percent">{{ nw }}%</div>
        </div>
      </div>
      <div class="item">
        <div class="item-key">
          <div class="iconfont icon-dian-copy-copy-copy"></div>
          <div class="name">微信</div>
        </div>

        <div class="item-value">
          <div class="count">{{ config.true }}</div>
          <div class="percent">{{ w }}%</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'wayChart',
  props:['config'],
  computed:{
    w(){
      const all =  this.config.true + this.config.false
      return (((this.config.true / all) +"").split('.')[1])>0?(((this.config.true / all) +"").split('.')[1].substr(0,2).length == 2?((this.config.true / all) +"").split('.')[1].substr(0,2):((this.config.true / all) +"").split('.')[1].substr(0,2) + '0'):0
    },
    nw(){
      const all =  this.config.true + this.config.false
      return (((this.config.false / all) +"").split('.')[1])>0?(((this.config.false / all) +"").split('.')[1].substr(0,2).length == 2?((this.config.false / all) +"").split('.')[1].substr(0,2):((this.config.false / all) +"").split('.')[1].substr(0,2)+'0'):0
    },
  },
  methods: {
    getOptions() {
      return {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.config.true, name: '微信二维码' },
              { value: this.config.false, name: '链接' },
            ]
          }
        ]
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.way-container {
  width: 100%;
  height: 100%;
  .title {
    font-size: 14px;
  }
  .chart-container {
    margin-top: 30px;
    width: 100%;
    height: 100%;
    .echarts {
      width: 288px;
      height: 259px;
    }
  }
  .bottom-container {
    margin-top: 7px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .item {
      display: flex;
      justify-content: space-between;
      line-height: 30px;
      .item-key {
        display: flex;
        .iconfont {
          margin-bottom: 10px;
          margin-right: 5px;
        }
        .name {
          margin-bottom: 10px;
          font-size: 12px;
        }
      }

      .item-value {
        display: flex;
        justify-content: space-around;
        font-size: 12px;
        margin-bottom: 30px;
        .count {
          margin-right: 40px;
        }
      }
    }
  }
}
</style>
